<template>
	<!-- 巡检时间提示 -->
  <view class="flex-col page">
    <view class="flex-col group">
      <view class="flex-col list">
        <view class="flex-col list-item" :key="i" v-for="(item, i) in list_UpwEp6z6">
          <view class="flex-row group_1">
            <image
              :src="$IMG_URL+'16557862348629854197.png'"
              class="image_1"
            />
            <text class="text_1">白小白（怡丰新都会）</text>
          </view>
          <view class="justify-between group_2">
            <text class="text_3">巡检次数</text>
            <text class="text_5">第一次巡检</text>
          </view>
          <view class="justify-between group_3">
            <text class="text_7">下次巡检项目</text>
            <text class="text_9">吊顶隐检</text>
          </view>
          <view class="justify-between group_4">
            <text class="text_11">预计下次巡检时间</text>
            <text class="text_13">2022/10/10</text>
          </view>
          <view class="divider"><!--*--></view>
          <text class="text_15" @click="delet(i)">删除</text>
        </view>
      </view>
      <view class="flex-col items-end section_3">
        <view class="flex-col items-center text-wrapper"><text class="text_25">清空消息</text></view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        list_UpwEp6z6: [null, null],
      };
    },
    methods: {
			delet(i){
				// 删除
			}
		},
  };
</script>

<style scoped lang="scss">
	page{
		background-color: #f6f7f9ff;
	}
  .list-item {
    padding: 0 23rpx 40rpx 24rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
  }
  .group_1 {
    padding: 32rpx 0 24rpx;
    border-bottom: solid 1rpx #eeeeee;
  }
  .group_2 {
    margin-top: 30rpx;
  }
  .group_3 {
    margin-top: 39rpx;
  }
  .group_4 {
    margin-top: 39rpx;
  }
  .divider {
    margin-top: 35rpx;
    background-color: #eeeeee;
    border-radius: 0.5rpx;
    height: 1rpx;
  }
  .text_15 {
    margin-top: 21rpx;
    align-self: flex-end;
    color: #ff371d;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .image_1 {
    border-radius: 50%;
    width: 64rpx;
    height: 64rpx;
  }
  .text_1 {
    margin-left: 16rpx;
    margin-top: 10rpx;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_3 {
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_5 {
    color: #1d6aff;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_7 {
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_9 {
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_11 {
    margin-bottom: 6rpx;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_13 {
    margin-top: 6rpx;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .page {
    background-color: #f6f7f9ff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }
  .group {
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .list {
    padding: 21rpx 24rpx 0;
  }
  .section_3 {
		width: 100%;
		position: fixed;
		bottom: 0;
		right: 0;
    background-color: #ffffff;
    box-shadow: 0px -2rpx 4rpx 0px #00000014;
  }
  .list-item:last-of-type {
    margin-top: 20rpx;
  }
  .text-wrapper {
    margin-right: 32rpx;
    padding: 9rpx 0 19rpx;
    background-color: #1d6aff14;
    border-radius: 28rpx;
    width: 148rpx;
		margin: 20rpx 0;
  }
  .text_25 {
    color: #1d6aff;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
</style>